<link rel="stylesheet"
	href="/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript"
	src="/js/plugins/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript">
	var zTreeObj;

	var setting = {
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			onClick : clickButton
		}
	};

	var zNodes = ${buttonTree}

	function clickButton(event, treeId, treeNode) {
		console.info(treeNode.id)
		$("#childButton").load("/wechatButtons/" + treeNode.id + "/childs");
	}
	$(function() {

		//初始化ztree
		zTreeObj = $.fn.zTree.init($("#buttonTree"), setting, zNodes);
		//获取id为1的节点按钮（根节点）
		var treeNode = zTreeObj.getNodeByParam("id", 1);
		//选中该节点按钮
		zTreeObj.selectNode(treeNode, true);
		//展开该节点按钮
		zTreeObj.expandNode(treeNode, true, false);
		//获取该节点下的子按钮
		$("#childButton").load("/wechatButtons/" + treeNode.id + "/childs");

		//保存按钮
		$("#saveButton").click(function() {
			$("#buttonSaveForm").ajaxSubmit({
				type : "POST",
				success : function(data) {
					if (data.success) {
						$.messager.popup("保存成功");
						refresh();
					} else {
						$.messager.alert("提示", data.errorMsg);
					}
					$("#myModal").modal("hide");
				}
			})
		})

		//新增按钮按钮
		/* $("#addButton").click(function() {
			editButton(null)
		}) */

		//按钮类型选择
		$("#buttonTypeDiv span").click(function() {
			//获取点击的那个按钮类型的值
			var type = $(this).data("type");
			//把对应的表单输入框显示出来
			showOrHideInput(type);
			//选择了微信按钮类型后，设置到form表单中type的input
			$("#type").val(type);
		})

	})
	
	//回显按钮数据用于编辑按钮
	function editButton(obj) {
		var json;
		//判断obj是否为null
		// 如果if表达式中的值是null、0、undefined就返回false，否则返回true
		if (!obj) {
			//自定义json数据,用于新增微信菜单按钮时使用，只需要属性，属性值都为空，目的是为了这个方法通用
			json = {
				"name" : "",
				"pId" : "",
				"id" : "",
				"type" : "",
				"key" : "",
				"url" : "",
				"appid" : "",
				"pagepath" : ""
			};
			
		} else {
			//在编辑时，获取按钮对象的属性
			json = $(obj).data("json");
		}

		$("#myModal").modal("show");
		//设置上级按钮的名字
		var nodes = zTreeObj.getSelectedNodes();
		if (nodes.length == 0) {
			$.messager.alert("提示", "请选择按钮");
		}
		$("#parentButton").val(nodes[0].name);
		//回显按钮数据
		$("#id").val(json.id);
		$("#name").val(json.name);
		$("#type").val(json.type);
		$("#pId").val(nodes[0].id);
		$("#key").val(json.key);
		$("#url").val(json.url);
		$("#appid").val(json.appid);
		$("#pagepath").val(json.pagepath);
		//把对应的表单输入框显示出来
		showOrHideInput(json.type);

	}
	
	//显示或隐藏表单输入框
	function showOrHideInput(type) {
		//把按钮类型的span显示出来
		$("#buttonTypeDiv span").each(function() {
			//先把所有span设置为不选
			$(this).attr("class", "label label-default");
		});
		//再把当前编辑的按钮类型对应的span设置为选择
		$("#"+type+"Span").attr("class", "label label-success");
		//显示或隐藏表单输入框
		if (type == "click") {
			$("#keyDiv").show();
			$("#viewDiv").hide();
			$("#appidDiv").hide();
			$("#pagepathDiv").hide();
		} else if (type == "view") {
			$("#keyDiv").hide();
			$("#viewDiv").show();
			$("#appidDiv").hide();
			$("#pagepathDiv").hide();
		} else if (type == "miniprogram") {
			$("#keyDiv").hide();
			$("#viewDiv").show();
			$("#appidDiv").show();
			$("#pagepathDiv").show();
		} else {
			$("#keyDiv").hide();
			$("#viewDiv").hide();
			$("#appidDiv").hide();
			$("#pagepathDiv").hide();
		}
	}

	//删除按钮
	function deleteButton(buttonId) {
		$.messager.confirm("提示", "是否确定删除", function() {
			$.ajax({
				url : "/wechatButtons/" + buttonId,
				type : "DELETE",
				success : function(data) {
					if (data.success) {
						$.messager.popup("删除成功");
					} else {
						$.messager.alert("提示", data.errorMsg);
					}
					refresh();
				}
			})
		})

	}

	//更新一下界面（树结构，和子按钮的div代码块）
	function refresh() {
		var nodes = zTreeObj.getSelectedNodes();
		if (nodes.length > 0) {
			$("#childButton").load("/wechatButtons/" + nodes[0].id + "/childs");
		}
	}
	
	//更新菜单到微信公众号
	function updateButton(){
		$.messager.confirm("提示", "是否确定更新公众号菜单按钮", function() {
			$.get("/wechatButtons/publish",function(data){
				if (data.success) {
					$.messager.popup("删除成功");
				} else {
					$.messager.alert("提示", data.errorMsg);
				}
			});
		})

	}
</script>


<div class="container-fluid cm-container-white">
	<div class="row">
		<div class="col-sm-3">
			<div class="panel panel-default">
				<div class="panel-body">
					<ul id="buttonTree" class="ztree"></ul>
				</div>
			</div>

		</div>
		<div class="col-sm-9" id="childButton"></div>
	</div>

	<!-- 添加按钮模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加按钮</h4>
				</div>
				<form action="/wechatButtons" method="post" id="buttonSaveForm">
					<input type="hidden" name="id" id="id" /> <input type="hidden"
						name="type" id="type" />
					<div class="modal-body">
						<div class="form-group">
							<label>上级按钮</label> <input type="hidden" name="pId" id="pId" /> <input
								class="form-control" value="顶级按钮" readonly="readonly"
								id="parentButton">
						</div>
						<div class="form-group">
							<label>按钮名</label> <input class="form-control" name="name"
								id="name">
						</div>
						<div class="form-group">
							<label>按钮类型</label>
							<div id="buttonTypeDiv">
								<span
									style="cursor: pointer; font-size: 13px; margin-right: 10px;" id="Span"
									class="label label-success" data-type="">无</span> <span id="clickSpan"
									style="cursor: pointer; font-size: 13px; margin-right: 10px;"
									class="label label-default" data-type="click">点击类型</span> <span id="viewSpan"
									style="cursor: pointer; font-size: 13px; margin-right: 10px;"
									class="label label-default" data-type="view">视图类型</span> <span id="miniprogramSpan"
									style="cursor: pointer; font-size: 13px; margin-right: 10px;"
									class="label label-default" data-type="miniprogram">小程序类型</span>
							</div>
						</div>
						<div class="form-group" style="display: none;" id="keyDiv">
							<label>按钮的key</label> <input class="form-control" name="key"
								id="key">
						</div>
						<div class="form-group" style="display: none;" id="viewDiv">
							<label>视图路径</label> <input class="form-control" name="url"
								id="url">
						</div>
						<div class="form-group" style="display: none;" id="appidDiv">
							<label>appid</label> <input class="form-control" name="appid"
								id="appid">
						</div>
						<div class="form-group" style="display: none;" id="pagepathDiv">
							<label>pagepath</label> <input class="form-control"
								name="pagepath" id="pagepath">
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="saveButton">保存</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


